<template>
    <div class="fbox">
        <a-form :model="formdata"  ref="fref" :labelCol="{span:4}" @finish="tosubmit" :rules="rules">
            <a-form-item name="username" label="用户名" hasFeedback>
                <a-input v-model:value="formdata.username" disabled placeholder="用户名不能小于6位" />
            </a-form-item>
            <a-form-item name="phone" label="手机号" hasFeedback>
                <a-input v-model:value="formdata.phone" placeholder="11位" />
            </a-form-item>
            <a-form-item name="email" label="邮箱" hasFeedback>
                <a-input v-model:value="formdata.email" placeholder="邮箱" />
            </a-form-item>
            <a-form-item name="password" label="密码" hasFeedback>
                <a-input v-model:value="formdata.password" placeholder="不填写默认为：666666" />
            </a-form-item>
            <a-form-item class="text-center">
                <a-button html-type="submit" type="primary">确认修改</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<style lang="less" scoped>
.fbox{
    padding:15px 10px;

    .reset{
        margin-left:15px;
    }
}
</style>
<script>
import { defineComponent, reactive,ref, toRaw, watch } from 'vue'
import { userinfo } from '@/api/user';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    setup(props,context) {
        const formdata=reactive({
            username:'',
            phone:'',
            email:'',
            password:'',            
        });

        const route=useRoute();
        const fref=ref();
        let userid=route.params.userid;
        
        const inituser = () =>{
            userinfo({userid:userid}).then(
            res=>{
                if(res.data['code']==200){
                    Object.assign(formdata,res.data['data']);
                }
                else{
                    message.error(res.data['msg']);
                }
            },
            err=>{
                console.log(err);
            }
            );
        };

        inituser();

        watch(
            ()=>route.params,
            ()=>{
                userid=route.params.userid;
                inituser();
            }
        )
        


        


        
        const checkphone=async (_rules,value) =>{
            if(value.length!=11){
                return Promise.reject('手机号不正确');
            }
            if(value.substr(0,1)!=1){
                return Promise.reject('手机号不正确');
            }

            let reg=/[a-z#@]/i;
            if(reg.test(value)){
                return Promise.reject('手机号不正确');
            }

            return Promise.resolve();

        };

        

        const rules={
          phone:[{required:true,validator:checkphone,trigger:'blur'}],

        };

        const tosubmit= () =>{
            const obj=toRaw(formdata);
            const cs={phone:obj.phone,email:obj.email,userid:userid,password:obj.password};
            userinfo(cs).then(
                res=>{
                    if(res.data['code']==200){
                        message.success('修改成功').then(
                            res=>{
                                fref.value.resetFields();
                                context.emit('gbs');
                            },
                            err=>{

                            }
                        );
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            )
        };

        


        return{
            formdata,tosubmit,rules,fref
        }
        
    },
})
</script>
